<template>
  <div class="product-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <van-loading type="spinner" size="0px" color="#1989fa" />
      <span>正在加载商品信息...</span>
    </div>
    <!-- 商品内容 -->
    <div v-else>
      <!-- 图片轮播 -->
      <van-swipe :autoplay="3000" :indicator-color="activeColor" :loop="true">
        <van-swipe-item v-for="(img, index) in imgList" :key="index">
          <img :src="img" alt="product image" class="product-img" @error="handleImageError(index)" />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品标题 -->
      <h1 class="product-title">{{ product.title }}</h1>
      <!-- 套餐信息 -->
      <div class="product-set">{{ product.set }}</div>
      <!-- 价格和包邮信息 -->
      <div class="product-price">
        <span class="price-num">{{ product.price }}</span>
        <span class="price-unit">元</span>
        <van-tag type="success" size="small">包邮</van-tag>
      </div>
      <!-- 商品描述 -->
      <div class="product-desc">{{ product.desc }}</div>
      <!-- 规格选择 -->
      <van-cell-group>
        <van-cell title="规格" :value="product.specification.selected" arrow="horizontal" @click="openSpecificationPicker" />
      </van-cell-group>
      <!-- 参数等信息 -->
      <van-cell-group>
        <van-cell title="参数" arrow="horizontal" @click="openParameterModal" />
      </van-cell-group>
      <!-- 操作按钮 -->
      <div class="product-actions">
        <van-button type="default" size="small" @click="addToCart">加入购物袋</van-button>
        <van-button type="primary" size="small" @click="buyNow">立即购买</van-button>
      </div>
    </div>
    <!-- 规格选择弹窗 -->
    <van-popup v-model:show="showSpecificationPicker" position="bottom">
      <van-picker
        :columns="specificationColumns"
        @confirm="onSpecificationConfirm"
        @cancel="showSpecificationPicker = false"
      />
    </van-popup>
    <!-- 参数信息弹窗 -->
    <van-popup v-model:show="showParameterModal" position="center">
      <div class="parameter-modal">
        <h2>商品参数</h2>
        <p v-for="(value, key) in product.parameters" :key="key">{{ key }}: {{ value }}</p>
        <van-button @click="showParameterModal = false">关闭</van-button>
      </div>
    </van-popup>
    <!-- 加入购物车弹出框 -->
    <van-popup v-model:show="showAddToCartPopup" position="center">
      <img :src="addToCartPopupImage" alt="Added to Cart" class="addToCartPopup-img" />
    </van-popup>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
// 加载状态
const loading = ref(true);
// 图片列表
const imgList = ref([]);
// 商品数据
const product = ref({
  title: '',
  set: '',
  price: 0,
  desc: '',
  specification: {
    selected: '',
    options: []
  },
  parameters: {}
});
// 轮播指示器颜色
const activeColor = ref('#fff');
// 规格选择弹窗显示状态
const showSpecificationPicker = ref(false);
// 参数信息弹窗显示状态
const showParameterModal = ref(false);
// 加入购物车弹出框显示状态
const showAddToCartPopup = ref(false);
// 加入购物车弹出框图片源
const addToCartPopupImage = ref('');
// 模拟数据加载
const fetchProductData = async () => {
  try {
    // 模拟接口请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    imgList.value = [
      '../../src/assets/18.png',
      '../../src/assets/20.png',
      '../../src/assets/21.png',
      '../../src/assets/22.png'
    ];
    product.value = {
      title: '索尼（SONY）Alpha 7 III(7M3K)全画幅微单数码相机',
      set: '【经典套机】28 - 70mm标准套装',
      price: 12599.00,
      desc: '性价比28 - 70mm镜头套装,实时眼部对焦搭配10张/秒高速连拍，支持4K - HDR专业视频格式。',
      specification: {
        selected: '黑色/【经典套机】28 - 70mm标准套装',
        options: [
          '黑色/【经典套机】28 - 70mm标准套装',
          '银色/【经典套机】28 - 70mm标准套装'
        ]
      },
      parameters: {
        像素: '2420万',
        连拍速度: '10张/秒',
        视频格式: '4K - HDR'
      }
    };
  } catch (error) {
    Toast.fail('加载商品信息失败');
  } finally {
    loading.value = false;
  }
};
// 页面挂载时加载数据
onMounted(() => {
  fetchProductData();
});
// 处理图片加载失败
const handleImageError = (index) => {
  imgList.value[index] = 'https://via.placeholder.com/600x400?text=Image+Not+Found';
};
// 打开规格选择弹窗
const openSpecificationPicker = () => {
  showSpecificationPicker.value = true;
};
// 规格选择确认
const onSpecificationConfirm = (value) => {
  product.value.specification.selected = value;
  showSpecificationPicker.value = false;
};
// 打开参数信息弹窗
const openParameterModal = () => {
  showParameterModal.value = true;
};
// 加入购物袋
const addToCart = () => {
  if (imgList.value.length > 0) {
    addToCartPopupImage.value = imgList.value[0];
    showAddToCartPopup.value = true;
    Toast.success('已加入购物袋');
  }
};
// 立即购买
const buyNow = () => {
  router.push('/OrderSettlement');
};
// 规格选择列数据
const specificationColumns = ref(product.value.specification.options);
</script>
<style scoped>
.product-detail {
  padding: 16px;
}
.product-img {
  width: 100%;
  height: auto;
}
.product-title {
  font-size: 20px;
  margin-bottom: 8px;
}
.product-set {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.product-price {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.price-num {
  font-size: 24px;
  color: #f44;
  margin-right: 8px;
}
.price-unit {
  font-size: 16px;
}
.product-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}
.product-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.parameter-modal {
  padding: 20px;
  text-align: center;
}
.parameter-modal h2 {
  margin-bottom: 10px;
}
.parameter-modal p {
  margin-bottom: 5px;
}
.addToCartPopup-img {
  width: 200px;
  height: 200px;
}
</style>